<template>
    <!--    数据查询-->
    <div id="C1">
        <div id="searchbox">
            <el-form :inline="true" :model="searchKeyWords" class="demo-form-inline">
                <el-form-item label="日期">
                        <el-date-picker
                                v-model="searchKeyWords.work_day"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="时间段">
                    <el-select v-model="searchKeyWords.time_slot" placeholder="时间段">
                        <el-option disabled label="请选择" value="" ></el-option>
                        <el-option label="8：00—14：00" value="1"></el-option>
                        <el-option label="14：00—22：00" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button  type="primary" @click="dialogFormVisible = true">新增排班</el-button>
                </el-form-item>
            </el-form>
            <el-dialog title="新增排班信息" :visible.sync="dialogFormVisible" center width="400px">
                <el-form  :model="insertKeyWords" class="demo-form-inline" ref="insertKeyWords" :rules="rules">
                    <el-form-item label="日期" prop="work_day">
                        <el-date-picker
                                v-model="insertKeyWords.work_day"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="时间段" prop="time_slot">
                        <el-select v-model="insertKeyWords.time_slot" placeholder="时间段">
                            <el-option disabled label="请选择" value="" ></el-option>
                            <el-option label="8：00—14：00" value="1"></el-option>
                            <el-option label="14：00—22：00" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作人员"  prop="staff_id">
                        <el-input v-model="insertKeyWords.staff_id" placeholder="工作人员">
                            <template slot="append" >
                                <Transfer @selectPerson="SPerson"></Transfer>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="newCP">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--        表格渲染-->
        <template>
            <el-table
                    :data="isGetData ? getCurrentData:searchCurrentData"
                    style="width: 100%">
                <el-table-column
                        label="日期"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.work_day }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="时间段"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{  scope.row.time_slot }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="工作人员"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{  scope.row.staff_id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <Pbedit  :editData='scope.row' @queren="handleEdit(scope.$index, scope.row)"></Pbedit>
                        <PbDel :delId="scope.row.staff_id"  @queren="handleDelete(scope.$index, scope.row)"></PbDel>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--        分页-->

        <div id="PageBox" class="block">
            <el-pagination
                    background
                    :current-page="isGetData? gcurrentPage:scurrentPage"
                    @current-change="handleCurrentChange"
                    :page-size="5"
                    layout="prev, pager, next"
                    :total="isGetData ? getTotalData:searchTotalData">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import PbDel from '../../components/houtai/PbDel'
    import Pbedit from '../../components/houtai/Pbedit'
    import Transfer from '../../components/houtai/transfer'


    export default {
        name: "cpsz",
        components:{
            PbDel ,
            Pbedit ,
            Transfer
        } ,
        data(){
            return{
                dialogFormVisible: false,
                isGetData:true,    //如果是页面渲染数据，table渲染数据源就是Getdata,否则,就是数据查询数据渲染，数据源就是searchData
                gcurrentPage: 1,   //当前页
                scurrentPage: 1,   //当前页
                searchKeyWords: {     //查询关键字存储
                    work_day: '',
                    time_slot: '',
                    pageNum:this.scurrentPage
                },
                insertKeyWords: {     //查询关键字存储
                    work_day: '',
                    time_slot: '',
                    staff_id:'',
                } ,


                rules: {
                    work_day: [
                        { required: true, message: '请选择日期', trigger: 'blur' },
                    ],
                    time_slot: [
                        { required: true, message: '请选择时间段', trigger: 'blur' },
                    ],
                    staff_id: [
                        { required: true, message: '请输入工作人员', trigger: 'blur' }
                    ]
                }
            }
        },

        computed:{
            AllStaff(){
                return this.$store.state.yygl.AllStaff
            },
            getCurrentData(){
                return this.$store.state.yygl.getCurrentDataA
            },
            getTotalData(){
                return 100
            },
            searchCurrentData(){
                return this.$store.state.yygl.searchCurrentDataA
            },
            searchTotalData(){
                return 50
            }
        },
        methods:{
            SPerson:function(selectPerson){
                // console.log(selectPerson)
                // console.log(selectPerson)
                this.editData.g_person =selectPerson.toString()
            },
            success() {
                this.$notify.success({
                    title: '成功',
                    message: '新增成功！',
                    offset:50
                });
            },
            error() {
                this.$notify.error({
                    title: '错误',
                    message: '网络出故障了，添加失败，请稍后重试！'
                });
            },
            ...mapActions(['getCurrentDataA','searchCurrentDataA']),
            newCP(){

                console.log(this.$refs.insertKeyWords)

                this.$refs.insertKeyWords.validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: '/InsertArrange',
                            method: 'post',
                            data: {
                                work_day:this.insertKeyWords.work_day ,
                                time_slot:this.insertKeyWords.time_slot,
                                staff_id:this.insertKeyWords.staff_id,
                            }
                        }).then(res => {
                            if (res.code === 200) {
                                this.dialogFormVisible = false
                                this.success()
                                this.getCurrentDataA(1)
                            } else {
                                this.error()
                            }
                        })
                    } else {
                        this.$notify.error('请检查提交数据的正确性！是否满足提示要求？')
                    }
                })
            }   ,
            onSubmit(){
                this.isGetData=false
                let searchData=this.searchKeyWords
                this.searchCurrentDataA(searchData)
            },
            handleEdit(index,item){
                // console.log(111)
                this.getCurrentDataA(this.gcurrentPage)
                // this.editItem=item
            },
            handleDelete(index,item) {
                if (this.isGetData) {
                    if (res.code === 200) {
                        this.getCurrentDataA(this.gcurrentPage)
                    }
                }else {
                    if (res.code === 200) {
                        let searchData = this.searchKeyWords
                        this.searchCurrentDataA(searchData)
                    }
                }
            },
            handleSizeChange(){

            },
            handleCurrentChange(val){
                if(this.isGetData){
                    this.gcurrentPage=val
                }else{
                    this.scurrentPage=val
                }

            }
        } ,
        created() {
            this.getCurrentDataA(1).then(res=>{
                // console.log(res)
            })
        }


    }
</script>

<style lang="less" scoped>
    #PageBox{
        padding: 10px;
        text-align: left;
        position: absolute;
        bottom: 10px;
        left: 20px;
    }
    #xiaoshou{
        cursor: pointer;
    }
    #C1{
        /*margin: auto;*/
        margin-left: 50px;
        margin-top: 10px;
        width: 1000px;
        height: 560px;
        position: relative;
        #searchbox{
            width: 1000px;
            text-align: left;
        }
    }
</style>
